<template>
  <div class="head">
    <div class="left">
      <span ref="child">{{ this.$route.meta.title1 }}</span>
      <div class="left-right1">
        <img src="./imgs/head1.png" alt="" />
      </div>
      <div class="left-right2">
        <img src="./imgs/head1.png" alt="" />
      </div>
      <div class="left-right3">
        <img src="./imgs/head1.png" alt="" />
      </div>
      <div class="left-right4">
        <img src="./imgs/head2.png" alt="" />
      </div>
      <div class="left-right5">
        <img src="./imgs/head3.png" alt="" />
      </div>
      <div class="left-right6">
        <img src="./imgs/圆.png" alt="" />
      </div>
    </div>
    <div class="middle">
      <div class="middle_1">
        <img src="./imgs/head4.png" alt="" />
      </div>

      <div class="middle_2">
        <img src="./imgs/head1.png" alt="" />
      </div>

      <div class="middle_3">
        <img src="./imgs/head1.png" alt="" />
      </div>

      <div class="middle_4">
        <img src="./imgs/head1.png" alt="" />
      </div>

      <div class="middle_5">
        <img src="./imgs/head1.png" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="right_1">
        <img src="../../assets/img/alarmCheckHead4.svg" alt="" />
      </div>
      <div style="display: flex; position: relative; top: -50%">
        <div class="right_2"></div>
        <div class="right_3"></div>
        <div class="right_4"></div>
        <div class="right_5"></div>
        <div class="right_6"></div>
        <div class="right_7"></div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "",
  data() {
    return {};
  },
};
</script>
  
<style scoped lang="scss">
.head {
  display: flex;
  height: 60px;
  margin-bottom: 10px;
}
/* 左侧 */
.left {
  width: 30%;

  background-image: url(../../assets/img/alarmCheckHead1.svg);
  background-size: cover;
  background-repeat: no-repeat;

  color: white;
  line-height: 60px;
  text-align: right;
  display: flex;
  span {
    flex: 2;
    color: rgba(250, 249, 250, 1);
    font-size: 28px;
    font-family: Arial;
  }
  img {
    width: 40px;
    height: 60px;
  }
  .left-right1 {
    img {
      position: relative;
      top: 0;
      left: 310%;
    }
  }
  .left-right2 {
    img {
      position: relative;
      top: 0;
      left: 240%;
    }
  }
  .left-right3 {
    img {
      position: relative;
      top: 0;
      left: 170%;
    }
  }
  .left-right4 {
    img {
      width: 25px;
      height: 15px;
      position: relative;
      top: 30%;
      left: 160%;
    }
  }
  .left-right5 {
    img {
      width: 36px;
      height: 25px;
      position: relative;
      top: 36%;
      left: 20%;
    }
  }
  .left-right6 {
    img {
      width: 15px;
      height: 15px;
      position: relative;
      top: 0;
      left: -80%;
    }
  }
}
.middle {
  width: 10px;
  display: flex;
  .middle_1 {
    img {
      width: 80px;
      height: 60px;
      position: relative;
      left: -40%;
    }
  }
  .middle_2 {
    img {
      width: 40px;
      height: 60px;
      position: relative;
      left: -260%;
    }
  }
  .middle_3 {
    img {
      width: 40px;
      height:60px;
      position: relative;
      left: -330%;
    }
  }
  .middle_4 {
    img {
      width: 40px;
      height: 60px;
      position: relative;
      left: -400%;
    }
  }
  .middle_5 {
    img {
      width: 40px;
      height: 60px;
      position: relative;
      left: -470%;
    }
  }
}
/* 右侧 */
.right {
  width: 70%;
  .right_1 {
    height: 50px;
    position: relative;
    top: -20%;
    img {
      width: 100%;
      height: 40px;
    }
  }
  .right_2 {
    margin-left: 1.5rem;
    width: 20%;
    height: 3px;
    background-color: #1d7573;
  }
  .right_3 {
    margin-left: 1.5rem;
    width: 1rem;
    height: 1rem;
    background-color: #1d7573;
    border-radius: 50%;
  }
  .right_4,
  .right_5,
  .right_6,
  .right_7 {
    position: relative;
    top: 0.2rem;
    margin-left: 1rem;
    width: 2rem;
    height: 0.2rem;
    background-color: #1d7573;
  }
}
</style>